
<script type="x/template" id="pagination-template">
	<v style="display: -webkit-inline-box;" v-if="parseInt(total) > 0">
	<div class="mr5 f4 hui" style="padding-top: 13px;">共有&nbsp;<span class="index_selcount">{{ total }}</span>&nbsp;条&nbsp;/&nbsp;<span class="index_selpages">{{ page }}</span>页
	</div>
	<button class="btn btn-bai min" @click="setCurrent(1)">首页</button>
	<button class="btn btn-bai min syy" @click="setCurrent(current - 1)">上一页</button>
	<div class="w16 t-c hui f4 bold" @click="setCurrent(p.val)" style="padding-top: 13px;">第 <span class="index_selpage">{{ current }}</span> 页</div>
	<button class="btn btn-bai min xyy" @click="setCurrent(current + 1)">下一页</button>
	<button class="btn btn-bai min" @click="setCurrent(page)">尾页</button>
	<div class="mr5 f4 hui" v-else>共有&nbsp;<span class="index_selcount">0</span>&nbsp;条&nbsp;/&nbsp;<span class="index_selpages">1</span>页
	</div>
	</v>
	<div class="mr5 f4 hui" v-else>共有&nbsp;<span class="index_selcount">{{ total }}</span>&nbsp;条&nbsp;/&nbsp;<span class="index_selpages">{{ page }}</span>页
	</div>
</script>
<script>
    Vue.component('pagination', {
        template: '#pagination-template',
        data: function () {
            return {
                current: this.current_page
            }
        },
        props: {
            total: {            // 数据总条数
                type: Number,
                default: 0
            },
            page_size: {            // 每页显示条数
                type: Number,
                default: 10
            },
            current_page: {            // 当前页码
                type: Number,
                default: 1
            },
            page_group: {        // 分页条数 -- 奇数
                type: Number,
                default: 5,
                coerce: function (v) {
                    v = v > 0 ? v : 5;
                    return v % 2 === 1 ? v : v + 1
                }
            }
        },
        computed: {
            page: function () { // 总页数
                return Math.ceil(this.total / this.page_size)
            },
            grouplist: function () { // 获取分页页码
                var len = this.page;
                var temp = [];
                var list = [];
                var count = Math.floor(this.page_group / 2);
                var center = this.current;
                if (len <= this.page_group) {
                    while (len--) {
                        temp.push({text: this.page - len, val: this.page - len})
                    }
                    return temp
                }
                while (len--) {
                    temp.push(this.page - len)
                }

                var idx = temp.indexOf(center);
                (idx < count) && (center = center + count - idx);
                (this.current > this.page - count) && (center = this.page - count);
                temp = temp.splice(center - count - 1, this.page_group);
                do {
                    var t = temp.shift();
                    list.push({
                        text: t,
                        val: t
                    })
                } while (temp.length);
                if (this.page > this.page_group) {
                    (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
                    (this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1})
                }
                return list
            }
        },
        methods: {
            setCurrent: function (idx) {
                if (this.current !== idx && idx > 0 && idx < this.page + 1) {
                    this.current = idx;
                    this.$emit('page-phange', this.current)
                }
            }
        }
    })
</script>